<template>
<!--  维护考核分析-->
  <div class="permission">
    <div class="operate">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
            v-model="queryParam.fullName"
            :size="size"
            style="margin-left: 10px"
            placeholder="请输入姓名"
            enter-button="chaxun "
            @search="
              () => {
                this.listQuery();
              }
            "
          ></ep-search>
        </div>
        <ep-button
          style="margin-left: 10px"
          icon="refresh.svg"
          :size="size"
          @click="
            () => {
              this.flushPage();
            }
          "
        ></ep-button>
        <a-tree-select
            placeholder="请选择任务范围(可多选)"
            ref="taskArea"
            allowClear
            tree-checkable
            style="margin-left: 10px;width:15vw"
            v-model="queryParam.manageAreas"
            :show-checked-strategy="SHOW_PARENT"
            :treeData="taskAreaTree"
            @change="manageAreaChange()"
            :size="size"
        />
        <a-select
            style="margin-left: 10px;width:9vw"
            v-model="queryParam.b0404"
            placeholder="请选择周期类型"
            @change="handleChange"
        >
          <a-select-option
              v-for="(item, index) in dictData.b0404"
              :value="item.dictKey"
              :key="index"
          >{{ item.dictValue }}</a-select-option
          >
        </a-select>
      </div>

      <div>
        <column-manage  :column.sync="tableColumn" @change="columnChange"></column-manage>
        <ep-button
          style="margin-left: 10px"
          :size="size"
          icon="export.svg"
          @click="
            () => {
              this.exportExcel();
            }
          "
          >导出</ep-button
        >
      </div>
    </div>

    <div style="margin-top: 10px"></div>


    <div class="ep-table">
      <zh-table
        ref="maintCheckList"
        rowId="roleId"
        height="auto"
        :url = "tableUrl"
        :columns="tableColumn"
        :data = "tableData"
        :total.sync="dataCount"
        :filter-config="{ remote: true }"
        :sort-config="{ remote: true }"
        @filter-change="filterChange"
        @sort-change="sortChange"
      >
        <template #filter="{ $panel, column }">
          <input
            type="type"
            v-for="(option, index) in column.filters"
            :key="index"
            v-model="option.data"
            @input="$panel.changeOption($event, true, option)"
          />
        </template>
      </zh-table>
    </div>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {
  getMaintCheckInfo,
  getPermissionParams,
} from "@/services/system/whdngxlApi";
import { getBatchDict } from "@/services/system/api";
import { TreeSelect } from "ant-design-vue";
import EpButton from "@/components/assembly/button";
import ZhTable from "@/components/zh-table/ZhTable";
import ColumnManage from "@/components/assembly/columnManage";
export default {
  name: "maintCheckAnalyse",
  components: {
    ColumnManage,
    EpButton,
    ZhTable,
  },
  data() {
    return {
      size: 'default',
      dictData: {},
      filtersData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 分页参数
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200,
      },
      tableUrl: getMaintCheckInfo,
      tableColumn: [
        {
          type: "seq",
          width: 80,
          fixed: "left",
          align: "center",
          title: "序号",
          visible: true,
        },
        {
          field: "c0303Name",
          title: "任务表",
          align: "center",
          minWidth: 150,
          visible: true,
          filters: [],
        },
        {
          field: "orgName",
          title: "任务范围",
          align: "center",
          minWidth: 150,
          visible: true,
        },
        {
          field: "fullName",
          title: "维护人员",
          align: "center",
          minWidth: 150,
          visible: true,
        },
        {
          field: "completeDesc",
          title: "完成率",
          align: "center",
          width: 150,
          visible: true,
        },
        {
          field: "ranking",
          title: "排名",
          sortable: true,
          align: "center",
          width: 150,
          visible: true,
        },
      ],
      rules: {},
      tableData: [],
      visible: false,
      //表头
      toolbarConfig: {
        custom: true,
        slots: {},
      },
      queryParam: {
        fullName: "",
        c0303Name: '',
        manageAreas: undefined,
        b0404: undefined,
        ranking: null
      },
      title:'排查人员分配',
      dataCount: "0", //数据量
      selectedRowKeys: [] /*table选中keys*/,
      selectionRows: [] /*table选中records*/,
      row: {},
      taskAreaTree: [],
      SHOW_PARENT,
      selectRuleBuild: {},
      orderRuleBuild: {},
      //查询规则
      selectRule: {
        fullName: {
          data: null,
          values: [],
          fuzzyQuery: true,
          multiple: false,
          targetField: "fullName",
        },
        b0404: {
          data: null,
          values: [],
          fuzzyQuery: false,
          multiple: false,
          targetField: "b0404",
        },
        c0303Name: {
          data: null,
          values: [],
          fuzzyQuery: false,
          multiple: true,
          targetField: "c0303",
        },
      },
      //排序规则
      orderRule: {
        ranking: {
          targetField: "ranking",
          order: null,
        },
      },

    };
  },
  mounted() {},
  created() {
    //获取任务范围
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
    // 数据初始化
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    manageAreaChange() {
        this.listQuery();
    },
    init() {
      const params2 = {};
      params2.dictFields =
        "c0303,b0404";
      this.$http.post(getBatchDict, params2).then((res) => {
        this.dictData = res.result;
        //获取筛选数据
        this.getFiltersData(this, "maintCheckList");
      });
      this.listQuery();
    },
    listQuery() {
      //手动清空用户的选择
      this.$refs.maintCheckList.clearCheckboxRow();
      //手动清空用户保留选中的行数据
      this.$refs.maintCheckList.clearCheckboxReserve();
      //删除所选中的数据
      this.$refs.maintCheckList.removeCheckboxRow();
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.$refs.maintCheckList.isAllChecked = false;
      this.row = {};
      this.tableData = [];
      this.createQuery();
      this.$refs.maintCheckList.query(this.queryParam);
    },
    createQuery(){
      this.selectRuleBuild = JSON.parse(JSON.stringify(this.selectRule));
      this.orderRuleBuild = JSON.parse(JSON.stringify(this.orderRule));
      const filterVOList = [];
      Object.keys(this.queryParam).forEach((key) => {
        const fieldRule = this.selectRuleBuild[key];
        if (fieldRule && this.queryParam[key]) {
          if (fieldRule.multiple) {
            fieldRule.values = this.queryParam[key].split(',');
          } else {
            fieldRule.data = this.queryParam[key];
          }
        }

        const fieldRuleForOrder = this.orderRuleBuild[key];
        if (fieldRuleForOrder && this.queryParam[key]) {
          fieldRuleForOrder.order = this.queryParam[key];
        }
      });
      Object.keys(this.selectRuleBuild).forEach((key) => {
        if (this.selectRuleBuild[key].data) {
          filterVOList.push({
            property: this.selectRuleBuild[key].targetField,
            data: this.selectRuleBuild[key].data,
            fuzzyQuery: this.selectRuleBuild[key].fuzzyQuery,
          });
        } else if (this.selectRuleBuild[key].values.length > 0) {
          filterVOList.push({
            property: this.selectRuleBuild[key].targetField,
            values: this.selectRuleBuild[key].values,
          });
        }
      });
      const orderVOList = [];
      Object.keys(this.orderRuleBuild).forEach((key) => {
        if (this.orderRuleBuild[key].order) {
          orderVOList.push({
            property: this.orderRuleBuild[key].targetField,
            order: this.orderRuleBuild[key].order,
          });
        }
      })
      this.queryParam.filterVOList = filterVOList;
      this.queryParam.orderVOList = orderVOList;
      this.queryParam.pageNum = this.tablePage.currentPage;
      this.queryParam.pageSize = this.tablePage.pageSize;
    },
    //刷新
    flushPage() {
      this.queryParam.fullName = "";
      this.queryParam.manageAreas = [];
      this.queryParam.b0404 = undefined
      this.init();
    },
    exportExcel() {},
    getFiltersData(that, tableName) {
      //把拿到的字典遍历进筛选的数组中
      let keyArr = Object.keys(that.dictData);
      for (let i = 0; i < keyArr.length; i++) {
        let filterKey = keyArr[i];
        let filterParam = that.dictData[filterKey];
        let filterObj = [];
        for (let j = 0; j < filterParam.length; j++) {
          let filterArr = {
            label: filterParam[j].dictValue,
            value: filterParam[j].dictValue,
            data: filterParam[j].dictKey
          };
          filterObj.push(filterArr);
        }
        that.filtersData[filterKey] = filterObj;
        that.$refs[tableName].setFilter(
          [filterKey] + "Name",
          that.filtersData[filterKey]
        );
      }
    },
    //筛选
    filterChange({ column, property, values, datas, filterList, $event }) {
      console.log(column);
      console.log(property);
      console.log(values);
      console.log(datas);
      console.log(filterList);
      console.log($event);
      if(values.length === 0){
        this.queryParam[property] = ''
      }
      filterList.forEach((item) => {
        if(this.selectRule[item.field].multiple){
          this.queryParam[item.field] = item.datas.join(',')
        }else {
          this.queryParam[item.field] = item.datas[0]
        }
      });
      this.listQuery()
    },
    sortChange({field,order,property}){
      this.queryParam[field] = order
      this.listQuery()
    },
    columnChange() {
      this.$refs.maintCheckList.refreshColumn();
    },
    handleChange(value){
      this.listQuery()
    }
  },
};
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  //.ep-table {
  //  height: calc(100% - 130px);
  //}
}

@media screen and (max-width: 1500px) {
  .ep-table {
    height: calc(100% - 96px);
  }
}

@media screen and (min-width: 1500px) {
  .ep-table {
    height: calc(100% - 110px);
  }
}
</style>
